<template>
  <div>
    <Row class="header" type="flex" justify="start">
      <Col span="24">
        <Icon class="icon" type="md-pie"/>
        <span class="title">小区人口统计扇形图</span>
      </Col>
    </Row>
    <br>
    <div id="personSumPieEchart" :style="{ width: width + 'px', height: height + 'px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'PersonSumPieEchart',
  data () {
    return {
      chartData: [],
      centerData: []
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 500
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    },
    props: {
      showType: {
        type: String,
        default: () => {
          return 'pc'
        }
      }
    }
  },
  mounted () {
    this.centerData = this.showType === 'pc' ? ['50%', '50%'] : ['60%', '40%']
    this.chart()
  },
  methods: {
    chart (data) {
      this.chartData = data
      let option = {
        title: {
          text: ''
        },
        textStyle: {
          // color: '#bababa'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 10
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.6)',
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
          formatter: function (params, ticket, callback) {
            return params.value.name + ': ' + params.value.counts + '人'
          }
        },
        dataset: {
          source: []
        },
        series: [
          {
            type: 'pie',
            // radius: '55%',
            radius: ['30%', '50%'],
            center: this.centerData,
            // color: ['#57B1EE', '#6DD9DB', '#B8A3DF'],
            label: {
              normal: {
                show: true,
                formatter: function (params, ticket, callback) {
                  return params.value.name + ': ' + params.value.counts + '人'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              }
            },
            itemStyle: {
              // 通常情况下：
              normal: {
              },
              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            encode: {
              itemName: 'region',
              value: 'sum'
            }
          }
        ]
      }
      this.chartData.forEach(item => {
        option.dataset.source.push(item)
      })
      let myChart = echarts.init(document.getElementById('personSumPieEchart'))
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
</style>
